<template>
  <div>
    <draggable v-model="pictureList" group="people" @start="drag=true" @end="draggableEnd">
      <div
        v-for="(item, index) in pictureList"
        :key="index"
        class="img-container"
        :class="{'active-container': item.downloadCode || item.file}"
      >
        <label :for="'img-input' + index">
          <i v-if="!item.downloadCode && !item.file" class="el-icon-plus" />
          <input
            :id="'img-input'+ index"
            :value="item.inputFile"
            class="img-input"
            type="file"
            accept=".jpg, .jpeg, .png, .gif, .bmp, .pdf, .JPG, .JPEG, .PBG, .GIF, .BMP, .PDF"
            @change="fileChange($event, index)"
          >
        </label>
        <img v-if="item.downloadCode || item.file" class="img" :src="getImgUrl(item)">
        <span v-if="item.downloadCode || item.file" class="action-label">
          <i class="el-icon-zoom-in" @click="handlePreview(item)" />
          <i v-if="true===showDelBtn" class="el-icon-delete" @click="handleDelete(item, index)" />
        </span>
      </div>
    </draggable>
    <el-dialog :visible.sync="previewVisible" append-to-body>
      <img width="100%" :src="getImgUrl(previewPictureInfo)" alt>
    </el-dialog>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: {
    draggable
  },
  props: {
    pictures: {
      type: Array,
      default() {
        return []
      }
    },
    multiple: {
      type: Boolean,
      default: false
    },
    showDelBtn: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      previewVisible: false,
      previewPictureInfo: {
        downloadCode: '',
        fileUrl: ''
      }
    }
  },
  computed: {
    pictureList: {
      get() {
        const pictures = this.pictures
        if (pictures.length === 0 || (pictures[pictures.length - 1].downloadCode || pictures[pictures.length - 1].file)) {
          pictures.push({
            downloadCode: '',
            inputFile: '',
            file: '',
            fileUrl: ''
          })
        }
        return pictures
      },
      set(val) {
        this.$emit('update:pictures', this.pictureList)
        this.$emit('change', this.pictureList)
      }
    }
  },
  async created() {

  },
  methods: {
    draggableEnd(item) {
      if (item.newIndex === (this.pictures.length - 1)) {
        return
      }
      if (item.oldIndex === (this.pictures.length - 1)) {
        return
      }
      if (item.oldIndex >= item.newIndex) {
        this.pictures.splice(item.newIndex, 0, this.pictures[item.oldIndex])
        this.pictures.splice(item.oldIndex + 1, 1)
      } else {
        this.pictures.splice(item.newIndex + 1, 0, this.pictures[item.oldIndex])
        this.pictures.splice(item.oldIndex, 1)
      }
      // var tempOption = this.pictures[item.oldIndex];
      // this.pictures[item.oldIndex] = this.pictures[item.newIndex];
      // this.$set(this.pictures, item.oldIndex, this.pictures[item.oldIndex]);
      // this.pictures[item.newIndex] = tempOption;
      // this.$set(this.pictures, item.newIndex, tempOption);
    },
    handlePreview(item) {
      this.previewPictureInfo = item
      this.previewVisible = true
    },
    handleDelete(item, index) {
      item.file = ''
      item.fileUrl = ''
      item.inputFile = ''
      if (!item.downloadCode) {
        this.pictureList.splice(index, 1)
      }
      if (item.downloadCode || item.goodsPictureId) {
        this.$emit('delete', item)
      }
      //   this.pictureList.splice(index, 1)
      //   this.$emit('change', this.pictureList)
    },
    async fileChange(event, index) {
      if (this.pictures.length > 30) {
        this.$commonUtils.showErrorToast('最多上传30张图片！')
        return
      }
      const pictureInfo = this.pictureList[index]
      pictureInfo.file = event.target.files[0]
      this.$set(this.pictureList, index, pictureInfo)
      this.$emit('add', pictureInfo)
      var reader = new FileReader()
      reader.readAsDataURL(pictureInfo.file)
      reader.onload = (e) => {
        pictureInfo.fileUrl = e.target.result
        this.$set(this.pictureList, index, pictureInfo)
      }
      if (index === this.pictureList.length - 1) {
        // this.pictureList.push({
        //   downloadCode: '',
        //   inputFile: '',
        //   file: '',
        //   fileUrl: ''
        // })
        this.pictureList = [...this.pictureList]
        return
      }
      const lastPictureInfo = this.pictureList[this.pictureList.length - 1]
      if (!lastPictureInfo.downloadCode && !lastPictureInfo.file) {
        // this.pictureList.push({
        //   downloadCode: '',
        //   inputFile: '',
        //   file: '',
        //   fileUrl: ''
        // })
      }
    },
    getImgUrl(item) {
      let imgUrl = ''
      if (item.fileUrl) {
        imgUrl = item.fileUrl
      }
      if (item.downloadCode) {
        imgUrl = this.$api.getDownloadServiceUrl(item.downloadCode)
      }
      return imgUrl
    }
  }
}
</script>

<style lang="scss" scope>
.img-container {
  width: 100px;
  height: 100px;
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  line-height: 104px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: inline-block;
  margin: 0 10px 0 0;

  label {
    display: inline-block;
    width: 100px;
    height: 100px;
    cursor: pointer;

    .el-icon-plus {
      font-size: 28px;
      color: #8c939d;
      cursor: pointer;
    }

    .img-input {
      position: absolute;
      top: 0;
      display: none !important;
      cursor: pointer;
    }
  }

  .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 98px;
    height: 98px;
  }

  .action-label {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    display: none;
    width: 100px;
    height: 100px;
    background: rgba(0, 0, 0, 0.6);

    .el-icon-zoom-in {
      color: #ffffff;
      font-size: 16px;
    }

    .el-icon-delete {
      color: #ffffff;
      font-size: 16px;
      margin-left: 10px;
    }
  }
}

.img-container:hover {
  border: 1px dashed #f07509;

  .el-icon-plus {
    color: #f07509;
  }
}

.active-container {
  border: 1px solid #c0ccda;
}

.active-container:hover {
  border: 1px solid #c0ccda;

  .action-label {
    display: block;
  }
}
</style>
